<template>
  <el-dialog v-model="dialogVisible" class="my-dialog" :title="'订单详情'" width="60%">
    <el-descriptions border :column="1">
      <el-descriptions-item label-align="center" width="40px" v-for="(item, index) in labelList" :key="index"
        :label="item.label">{{ orderData[item.prop] }} <el-icon color="var(--el-color-primary)" class="copy-icon"
          size="16" @click.stop="copy(orderData[item.prop])">
          <CopyDocument />
        </el-icon></el-descriptions-item>
    </el-descriptions>
    <div class="table-box">
      <el-table border :data="tableData.list">
        <el-table-column v-for="(item, index) in tableProps" :key="index" :prop="item.prop" :label="item.label"
          align="center" :width="item.width || ''" :formatter="formatter">
        </el-table-column>
        <template #append>
          <div class="flexRightCenter sums" v-if="tableData.list.length > 0">
            <div class="total">合计</div>
            <div>{{ orderData.currency_symbol + tableData.describe.price?.toFixed(2) }}</div>
            <div>{{ orderData.currency_symbol + tableData.describe.original_price?.toFixed(2) }}</div>
            <div class="last">{{ orderData.currency_symbol + (tableData.describe.refund_price?.toFixed(2) || '0.00') }}</div>
          </div>
        </template>
      </el-table>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
import { ElMessage } from 'element-plus';
import { isEmpty } from 'lodash-es';

const dialogVisible = ref(false)
const labelList = ref([
  { label: '订单编号', prop: 'order_no' },
  { label: '活动编号', prop: 'activity_no' },
]);

const tableProps = ref([
  { prop: 'title', label: '商品名称', width: '150px' },
  { prop: 'amount', label: '购买数量', width: '100px' },
  { prop: 'univalent', label: '单价', },
  { prop: 'sums', label: '合计', },
  { prop: 'youhui', label: '优惠金额', },
  { prop: 'discount', label: '抵扣金额', },
  { prop: 'original_price', label: '应付金额', width: '90px', },
  { prop: 'price', label: '实付金额', width: '90px', },
  { prop: 'refund_price', label: '退款金额', width: '90px', },
])

const orderData = ref({});
const tableData = ref({})

// methods
const copy = (text) => {
  if (navigator.clipboard&&navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text);
    ElMessage.success('复制成功')
  } else {
    try {
      let txAr = document.createElement('textarea');
      txAr.value = text;
      txAr.style.position = 'fixed';
      txAr.style.opacity = 0;
      txAr.readOnly = true;
      txAr.style.left = '-9999px';
      txAr.style.top = '-9999px';
      document.body.appendChild(txAr);
      txAr.select();
      document.execCommand('copy');
      ElMessage.success('复制成功')
      document.body.removeChild(txAr);
    } catch (error) {
      ElMessage.error('浏览器不支持')
    }
  }
}

const formatter = (row, column) => {
  if (column.property !== 'title' && column.property !== 'amount') {
    const item = orderData.value.currency_symbol + (row[column.property] || '0.00');
    return item
  }
  return row[column.property]
}

watchEffect(() => {
  if (!isEmpty(tableData.value)) {
    if (tableData.value.list.length < 1) {
      return;
    }
    const list = tableData.value.list.map(item => {
      return {
        ...item,
        // sums: orderData.value.currency_symbol + (item.amount * item.univalent).toFixed(2),
        sums: (item.amount * item.univalent).toFixed(2),
        price: (item.amount * item.price).toFixed(2),
        // original_price: orderData.value.currency_symbol + item.original_price,
        // price: orderData.value.currency_symbol + item.price,
        // refund_price: orderData.value.currency_symbol + item.refund_price,
        // discount: orderData.value.currency_symbol + item.discount,
        // univalent: orderData.value.currency_symbol + item.univalent
      }
    })
    tableData.value.list = list;
  }
})

defineExpose({
  dialogVisible,
  tableData,
  orderData
})
</script>
<style lang="less" scoped>
.table-box {
  margin-top: 20px;
}

.copy-icon {
  transform: translateY(3px);
  cursor: pointer;
}

.sums {
  text-align: center;

  div {
    height: 23px;
    line-height: 23px;
    padding: 8px 0;
    // 比table单元格少条border减1px
    width: 89px;
    border-left: var(--el-table-border);
    overflow: hidden;

    &.total {
      flex: 1;
      border: none;
    }

    &.last {
      border-left: var(--el-table-border);
      width: 90px;
    }
  }
}
</style>